<%@ page import="entry.Books" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: alen
  Date: 2024/8/14
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书列表页面</title>
    <%
        String base = request.getContextPath() + "/";
        System.out.println(base);
        String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + base;
        System.out.println(url);
    %>
    <base href="<%=url%>">
    <script type="text/javascript" src="js/jquery-1.8.3%20.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //1、窗体加载后，立即发送异步请求，获得所有数据。
            $.get("book/queryByBook", function (pageHelper) {
                JSON.stringify(pageHelper);
                forBooks(pageHelper.list);
                showButton(pageHelper);
            });

           //2、查询按钮，单击后，发送异步请求
           $("[value='查询']").click(function () {
               //获得下拉列表的value值
               var index = $("select").val();
               var str = $("[name='qval']").val();
                $.get("book/queryByBook", {
                    "query":index ,
                    "str":str
                }, function (pageHelper) {
                    JSON.stringify(pageHelper);
                    forBooks(pageHelper.list);
                    showButton(pageHelper);
                });
           });
        });

        //为删除a标签添加单击事件
        $(document).on("click", "a[title='删除']", function () {
            //发送异步请求
            var bookid = $(this).attr("name");
            $.get("book/delete", {
                "bookid":bookid
            }, function (obj) {
                JSON.stringify(obj);
                alert(obj.mess);//获得响应文本里的：删除结果的提示信息
                var books = obj.pageHelper.list;//获得响应文本里的：最新的查询集合

                forBooks(books);
                for (var i = 0; i < books.length; i++){
                    alert(books[i].bookname + books[i].bookauthor + books[i].bookpublish + books[i].bookpage + books[i].bookprice);
                }
                showButton(obj.pageHelper);
            });
        });
        //为修改a标签添加单击事件
        $(document).on("click", "a[title != '删除']", function () {
            var bookid = $(this).attr("name");
            window.location.href = "updatebook.jsp?bookid=" + bookid;
        });

        //集合循环遍历
        function forBooks(books) {
            $("tbody").empty();
            for (var i = 0; i < books.length; i++){
                $("<tr>" +
                    "<td>" + books[i].bookname + "</td>" +
                    "<td>" + books[i].bookauthor + "</td>" +
                    "<td>" + books[i].bookpublish + "</td>" +
                    "<td>" + books[i].bookpage + "</td>" +
                    "<td>" + books[i].bookprice + "</td>" +
                    "<td><a name= '" + books[i].bookid + "' title='删除'>删除</a>"+"/"+"<a name= '" + books[i].bookid + "'>修改</a></td>" +
                    "</tr>").appendTo("tbody");
            }
        }

        //根据pageHelper，动态获得分页按钮首页 上一页 下一页 尾页
        function showButton(pageHelper) {
            $("div").empty();
            if (pageHelper.whichPage != 1){
                $("<input type='button' value='首页' name='1'/>").appendTo("div");
                $("<input type='button' value='上一页' name='" + (pageHelper.whichPage - 1) + "'/>").appendTo("div");
            }
            $("<input type='text' value= '" + "当前" + pageHelper.whichPage + "/" + pageHelper.pageNum + "' disabled/>");
            if (pageHelper.whichPage != pageHelper.pageNum){
                $("<input type='button' value='下一页' name='" + (pageHelper.whichPage + 1) + "'/>").appendTo("div");
                $("<input type='button' value='尾页' name='" + (pageHelper.pageNum) + "'/>").appendTo("div");
            }
        }
        //为分页按钮，绑定单击事件
        $(document).on("click", "[type='button'][value!='查询']", function () {
            //获得下拉列表的value值
            var index = $("select").val();
            var str = $("[name='qval']").val();
            var whichPage = $(this).attr("name");
            $.get("book/queryByBook", {
                "query":index ,
                "str":str,
                "whichPage":whichPage
            }, function (pageHelper) {
                JSON.stringify(pageHelper);
                forBooks(pageHelper.list);
                showButton(pageHelper);
            });
        });
    </script>
</head>
<body>
    <select name="query">
        <option value="-1" disabled>---请选择---</option>
        <option value="1">书名</option>
        <option value="2">作者</option>
        <option value="3">出版社</option>
    </select>
    <input type="text" name="qval"/>
    <input type="submit" value="查询">
    <a href="addBook.jsp">添加图书</a>
    <table border="1px
">
        <thead>
            <tr>
                <td>书名</td>
                <td>作者</td>
                <td>出版社</td>
                <td>页数</td>
                <td>价格</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
<div>

</div>
</body>
</html>
